<template>
	<view class="issuing">
		<u-navbar title="补贴数据" :back-icon-size="28" back-icon-color="#101010" :border-bottom="false" :background="{ background: '#F8F8F9' }"></u-navbar>
		<view class="topdata u-flex u-row-between u-flex-wrap">
			<view class="databox" style="margin-bottom: 20px;">
				<view class="fontprice">￥{{ nowyugu }}</view>
				<view class="fontbot" style="color: #BABDC1;">本月预估补贴</view>
			</view>
			<view class="databox" style="margin-bottom: 20px;">
				<view class="fontprice">￥{{ nowjiesuan }}</view>
				<view class="fontbot" style="color: #BABDC1;">本月结算补贴</view>
			</view>
			<view class="databox">
				<view class="fontprice">￥{{ lastyugu }}</view>
				<view class="fontbot" style="color: #BABDC1;">上月预估补贴</view>
			</view>
			<view class="databox">
				<view class="fontprice">￥{{ lastjiesuan }}</view>
				<view class="fontbot" style="color: #BABDC1;">上月结算补贴</view>
			</view>
		</view>
		<view class="issingbox">
			<view class="issinglist">
				<view class="order" v-for="(res, index) in goodsList" :key="res.id">
					<view class="item">
						<view class="left"><image :src="res.itemImg" mode="aspectFill"></image></view>
						<view class="content">
							<view class="title u-line-1">{{ res.itemTitle }}</view>
							<view class="type u-flex u-row-between">
								<text style="color: red;">￥{{ res.itemPrice }}</text>
								<text class="u-line-1">
									{{ res.sellerShopTitle }}
									<text class="u-p-l-10">{{ res.itemId }}</text>
								</text>
							</view>
							<view class="type u-flex u-row-between">
								<text>
									提成
									<text class="numinfo">{{ res.totalCommissionRate }}</text>
									%
								</text>
								<view class="price_right">
									<view class="cominfo">预估收入 ￥{{ res.pubSharePreFee == null ? 0 : parseFloat(res.pubSharePreFee).toFixed(2) }}</view>
								</view>
							</view>
							<view class="price">
								<view class="price_left">{{ res.tkStatusText }}</view>
								<view class="price_right">{{ res.tkCreateTime }}</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :margin-top="40" :margin-bottom="0" bg-color="transparent" />
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" :top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'issuing',
	data() {
		return {
			page: 1,
			max_page: 1,
			scrollTop: 0,
			status: 'loadmore',
			mpbarheight: this.statusBarHeight,
			actType: 1,
			goodsList: [],
			nowyugu: uni.getStorageSync('nowmonth').pubSharePreFee,
			nowjiesuan:  uni.getStorageSync('nowmonth').pubShareFee,
			lastyugu:  uni.getStorageSync('lastmonth').pubSharePreFee,
			lastjiesuan: uni.getStorageSync('lastmonth').pubShareFee
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(option) {
		this.getuserorder(1);
		
		// console.log(this.currentMonth2());
	},
	//挂载开始之前被调用
	beforeMount() {},
	//  onPullDownRefresh() {
	//  //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// console.log('refresh');
	// setTimeout(function() {
	// 	uni.stopPullDownRefresh(); //停止下拉刷新动画
	// }, 1000);
	//  },
	onReachBottom() {
		this.status = 'loading';
		this.page = ++this.page;
		if (this.max_page < this.page || this.max_page == this.page) {
			this.status = 'nomore';
			return false;
		}

		this.getuserorder(parseInt(this.page));
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getuserorder(page) {
			this.$u.api
				.getuserorder({
					page: page,
					pagesize: 10
				})
				.then(res => {
					// console.log(res);
					this.max_page = res.data.max_page;
					this.goodsList.push(...res.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.issuing {
	background-color: #f4f4f4;
	min-height: 100vh;
	.topdata {
		width: 696rpx;
		margin: 40rpx auto;
		.databox {
			width: 324rpx;
			height: 192rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			.fontprice {
				color: rgba(16, 16, 16, 100);
				font-size: 40rpx;
				font-weight: 600;
				text-align: center;
				margin-top: 40rpx;
			}
			.fontbot {
				font-size: 28rpx;
				font-weight: 600;
				margin-top: 40rpx;
				text-align: center;
			}
		}
	}
	.issingbox {
		.issinglist {
			margin-top: 40rpx;
			.order {
				width: 696rpx;
				background-color: #ffffff;
				margin: 24rpx auto;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 28rpx;
				// padding-bottom: 80rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.store {
							margin: 0 10rpx;
							font-size: 28rpx;
							font-weight: bold;
						}
					}

					.right {
						color: $u-type-warning-dark;
					}
				}

				.item {
					display: flex;
					// margin: 18rpx 0 0;
					position: relative;
					.left {
						margin-right: 20rpx;
						height: 150rpx;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 12rpx;
						}
						.corner {
							position: absolute;
							top: -12rpx;
							left: -18rpx;
							width: 40rpx;
							height: 40rpx;
							text-align: center;
							display: flex;
							justify-content: center;
						}
						.grayc {
							position: absolute;
							top: -12rpx;
							left: -18rpx;
							width: 40rpx;
							height: 40rpx;
							text-align: center;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #96aecb;
							background-color: #e8e9ea;
							border-radius: 20rpx 16rpx 70rpx 16rpx;
						}
					}

					.content {
						.title {
							width: 478rpx;
							font-size: 28rpx;
							// line-height: 50rpx;
							color: #101010;
						}
						.hotbox {
							// width:254rpx;
							height: 60rpx;
							position: relative;
							.hot_bg {
								position: absolute;
								top: 4rpx;
								left: 0;
							}
							.hot_text {
								width: 254rpx;
								height: 50rpx;
								line-height: 50rpx;
								text-align: center;
								position: absolute;
								top: 18rpx;
								left: 0;
								color: white;
								font-size: 24rpx;
							}
						}
						.type {
							margin: 4rpx 0;
							font-size: 24rpx;
							color: $u-tips-color;

							.price_right {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;

								// width: 260rpx;
								.cominfo {
									color: rgba(153, 153, 153, 1);

									.numinfo {
										color: #333333;
									}
								}
							}
						}

						.price {
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.oldprice {
								text-decoration: line-through;
								color: rgba(153, 153, 153, 1);
							}

							.price_left {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								color: rgba(153, 153, 153, 1);
							}

							.price_right {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: rgba(153, 153, 153, 1);
								// width: 260rpx;
								.cominfo {
									color: rgba(153, 153, 153, 1);

									.numinfo {
										color: #333333;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
